<template>
  <section style="margin-top: 40px;" :class="{mask: showArea}" @click="cancelArea">
    <header class="cm-header pf">
      <div class="mint-1px-r" @click="showCityList"><!--北京-->
        <span>{{ cityName }}</span><!--state.name-->
        <span class="city-arrow-icon vm"></span><!--下拉箭头-->
      </div>
      <div @click="showAreaAction"><!--全部区域，鼠标点击之后，showArea为true，全部区域下拉列表显示-->
        <span>{{ area }}</span>
        <span class="city-arrow-icon vm"></span><!--下拉箭头-->
      </div>
    </header>
    <ul class="area-item"  v-show='showArea' @click="selectAreaAction">
      <li>全部区域（{{allArea.length}}）</li>
      <li v-for="item in regionOrder">
        {{ item }}（{{regionCinemas[item].length}}）
      </li>
    </ul>
  </section>
</template>

<script>
  import { mapGetters, mapMutations } from 'vuex'
  export default{
    data () {
      return {
        area: '全部区域',
        showArea: false,
        allArea: [],
        regionOrder: [],
        regionCinemas: {}
      }
    },
    methods: {
      ...mapMutations([
        'pushLoadStack',
        'completeLoad',
        'showCityList',
        'updateAreaData'
      ]),
      requestData (url, fn) {
        this.pushLoadStack()
        this.$axios.get(url).then(fn).then(this.completeLoad)
      },
      matchCityStr (str) {//根据传进来的城市名参数返回对应的rN值
        let randomList = ['bj', 'sh', 'gz']
        let randomCity = randomList[Math.floor(3*Math.random())]
        switch (str) {
          case '北京': return 'bj'
          case '上海': return 'sh'
          case '广州': return 'gz'
          default: return randomCity
        }
      },
      getAreaData (cityName) {//MovieArea核心方法
        let cityStr = this.matchCityStr(cityName)
        this.allArea = []
        this.requestData(`/movie/cinema/?city=${cityStr}`, (response) => {
          let data = response.data
          let regionOrder = data.data.returnValue.regionOrder//城市区域
          let regionCinemas = data.data.returnValue.regionCinemas//每个区域的电影院信息
          this.regionOrder = regionOrder
          this.regionCinemas = regionCinemas
          regionOrder.forEach((item) => {
            regionCinemas[item].forEach((cinema) => {
              this.allArea.push(cinema)
            })
          })
          console.log(this.allArea)
        })
      },
      selectAreaAction (event) {
        let str = event.target.innerHTML.trim()
        console.log(str);//昌平区（8）
        let reg = /([\u4e00-\u9fa5]*)\（/
        this.area = reg.exec(str)[1]
        console.log(this.area)//昌平区
        this.showArea = false
        document.documentElement.style.overflow = 'scroll'
      },
      showAreaAction () {
        this.showArea = true
        document.documentElement.style.overflow = 'hidden'
      },
      cancelArea (event) {
        if (event.target.className === 'mask') {
          this.showArea = false
          document.documentElement.style.overflow = 'scroll'
        }
      }
    },
    computed: mapGetters([
      'cityName'
    ]),
    watch: {
      area () {//城市区域名发生改变
        if (this.area === '全部区域') {
          this.updateAreaData({area: this.allArea})
        } else {
          this.updateAreaData({area: this.regionCinemas[this.area]})
        }
      },
      cityName () {//监听城市名发生改变
        this.getAreaData(this.cityName)
        this.area = '全部区域'
        setTimeout(() => {
          this.updateAreaData({area: this.allArea})
        }, 0)
      }
    },
    created () {
      this.getAreaData(this.$store.state.name)
      setTimeout(() => {
        this.updateAreaData({area: this.allArea})
      }, 0)
    }
  }
</script>

<style>
  .cm-header {
    background: #fafafa;
    color: #333;
    height: 40px;
    line-height: 26px;
    font-size: 14px;
    left: 0px;
    right: 0px;
    top: 0px;
    display: -webkit-box;
    box-sizing: border-box;
    padding: 8px 0;
    border-bottom: 1px solid #ebebeb;
  }
  .cm-header>div {
    -moz-box-flex: 1.0;
    -webkit-box-flex: 1.0;
    text-align: center;
    box-sizing: border-box;
  }
  .area-item {
    background-color: #fff;
    font-size: 14px;
    color: #222;
    box-sizing: border-box;
    max-height: 70%;
    padding-left: 15px;
    overflow-y: scroll;
  }
  .area-item li {
    padding: 14px 0;
    border-bottom: 1px solid #ebebeb;
  }
</style>

